<template @click="dianji">
	<div>
		<div class="container">
			<div class="guigeBox">
				<div class="chooseGuige" @mouseenter="yiru" @mouseleave="yichu" v-if="this.add1==true">
					<div class="title">
						<span class="name">规格名:</span>
						<el-select v-model="value" placeholder="请选择" size="mini" @change="ev_change()">
							<el-option v-for="(item,idx) in options" :key="idx" :label="item.label" :value="idx" :disabled="item.disabled">
							</el-option>
						</el-select>
						<span v-if="this.move==true" class="close" @click="ev_close1">x</span>
					</div>
					<div class="zhi">
						<span>规格值:</span>
						<ul class="leixing">
							<li v-for="(item,idx) in value1" :key="idx">
								{{item}}
								<span class="close" @click="del(idx)">x</span>
							</li>
						</ul>
						<el-row v-if="this.show==true" class="addBtn"  >
							<el-button size="mini" type="primary" @click="add">添加</el-button>
						</el-row>
					</div>
					<div class="tankuan" v-if="this.choose==true">
						<el-select size="mini" v-model="value1" multiple placeholder="请选择" @change="ev_choose1()">
							<el-option @blur="huode" v-for="item in options2" :key="item.value" :label="item.label" :value="item.label">
							</el-option>
						</el-select>
					</div>
				</div>

				<div class="chooseGuige" @mouseenter="yiru2" @mouseleave="yichu2" v-if="this.add2==true">
					<div class="title">
						<span class="name">规格名:</span>
						<el-select v-model="value2" placeholder="请选择" size="mini" @change="ev_change2()">
							<el-option v-for="(item,idx) in options" :key="idx" :label="item.label" :value="idx" :disabled="item.disabled">
							</el-option>
						</el-select>
						<span v-if="this.move2==true" class="close" @click="ev_close2">x</span>
					</div>
					<div class="zhi">
						<span>规格值:</span>
						<ul class="leixing">
							<li v-for="(item,idx) in value3" :key="idx">
								{{item}}
								<span class="close" @click="ev_del2(idx)">x</span>
							</li>
						</ul>
						<el-row v-if="this.show2" class="addBtn" @change="ev_choose2()">
							<el-button size="mini" type="primary" @click="ev_add2">添加</el-button>
						</el-row>
					</div>
					<div class="tankuan" v-if="this.choose2==true">
						<el-select size="mini" v-model="value3" multiple placeholder="请选择">
							<el-option @blur="huode" v-for="item in options2" :key="item.value" :label="item.label" :value="item.label">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="addguige" >
					<el-row>
						<el-button size="mini" @click="addguige">添加规格项目</el-button>
					</el-row>
				</div>
			</div>
			<div class="tableBox">
				<el-table :data="this.showData" style="width: 100%">
					<el-table-column prop="name" :label="this.label" >
					</el-table-column>
					<el-table-column prop="name2" :label="this.label2" width="180">
					</el-table-column>
					<el-table-column prop="address" label="地址">
					</el-table-column>
				</el-table>
			</div>
			<div class="textBox">

			</div>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show2: false,
				page: 3,
				n: 0,
				add1: false,
				add2: false,
				choose: false,
				choose2: false,
				move: false,
				move2: false,
				label:'',
				label2:'',
				options: [{
					value: '选项1',
					label: '颜色',
					disabled: false
				}, {
					value: '选项2',
					label: 'size',
					disabled: false
				}, ],
				options2: [{
						value: '选项1',
						label: '黑色',
						disabled: false
					}, {
						value: '选项2',
						label: '白色',
						disabled: false
					},
					{
						value: '选项3',
						label: '红色',
						disabled: false
					},
					{
						value: '选项4',
						label: '土豪金',
						disabled: false
					},
					{
						value: '选项5',
						label: 'xl',
						disabled: false
					},
					{
						value: '选项6',
						label: 'xxl',
						disabled: false
					},
				],
				
				value: [],
				value1: [],
				value2: [],
				value3: [],
				showData:[],
			}
		},
		methods: {
			add() {
				this.choose = !this.choose
				// console.log(this.value1)
				this.value1.forEach(item=>{
					this.showData.push(
					{
						name:item,
						name2:''
					})
				})
				
			},
			ev_add2() {
				this.choose2 = !this.choose2
				this.value3.forEach(item=>{
					this.showData.forEach(i=>{
						i.name2=item
					})
				})
				console.log(this.showData)
			},
			shiqu() {
				this.choose = false
			},
			huode() {
				this.choose = true
			},
			yiru() {
				this.move = true
			},
			yichu() {
				this.move = false
			},
			yiru2() {
				this.move2 = true

			},
			yichu2() {
				this.move2 = false
			},
			del(idx) {
				var arr3 = []
				arr3.push(this.value1[idx])
				arr3.forEach(item => {
					var idx = this.value1.indexOf(item)
					this.value1.splice(idx, 1)
				})
			},
			ev_del2(idx) {
				var arr4 = []
				arr4.push(this.value3[idx])
				arr4.forEach(item => {
					var idx = this.value3.indexOf(item)
					this.value3.splice(idx, 1)
				})
			},
			addguige() {
				this.n = this.n + 1
				if (this.n == 1) {
					this.add1 = true
					console.log('add1', this.add1)
				}
				if (this.n == 2) {
					this.add2 = true
					console.log('add2', this.add2)
				}
			},
			ev_close1() {
				this.add1 = false
				this.n = 0
				this.value = []
				this.value1 = []
				this.show=false
			},
			ev_close2() {
				this.add2 = false
				this.n = 1
				this.value2 = []
				this.value3 = []
				this.show2=false
			},
			ev_change() {
				this.show = true
				this.options[this.value].disabled = !this.options[this.value].disabled
				this.label=this.options[this.value].label
				console.log(this.label)
			},
			ev_change2() {
				this.show2 = true
				this.options[this.value2].disabled = !this.options[this.value2].disabled
				this.label2=this.options[this.value2].label
			},
			ev_choose1(){
				console.log(this.value1)
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.container {
		width: 800px;
		margin: 0 auto;
		font-size: 12px;

		.guigeBox {
			width: 100%;
			border: 1px solid #e5e5e5;
			padding: 10px;

			.chooseGuige {
				position: relative;

				.title {
					display: flex;
					align-items: center;
					background-color: #f8f8f8;
					padding: 7px 10px;

					.close {
						display: inline-block;
						width: 15px;
						height: 15px;
						border-radius: 50%;
						background-color: #afafaf;
						text-align: center;
						line-height: 15px;
						cursor: pointer;
						margin-left: 500px;
						color: white;
					}
				}

				.zhi {
					padding: 10px 10px 10px;
					color: #666;
					font-size: 12px;
					display: flex;
					align-items: center;

					.leixing {
						display: flex;

						li {
							margin-left: 10px;
							border: 1px solid #2794f3;
							padding: 5px;
							border-radius: 2px;
							display: flex;

							.close {
								vertical-align: middle;
								cursor: pointer;
								margin-left: 5px;
								color: #409eff;
								display: inline-block;
								width: 14px;
								height: 14px;
								border-radius: 50%;
								text-align: center;
								line-height: 14px;
								font-size: 12px;
							}

							.close:hover {
								background-color: #409eff;
								color: white;
							}
						}
					}

					.addBtn {
						margin-left: 10px;
					}
				}

				.tankuan {
					position: absolute;
					z-index: 10;
				}
			}

			.addguige {
				background-color: #f8f8f8;
				padding: 7px 10px;
			}
		}

	}
</style>
